<template>
  <div class="exhibits-box">
    <div class="exhibits-left">
      <div
        @click="addCruuent(item.id, item)"
        class="item-box"
        v-for="item in info.children"
        :key="item.id"
        :style="{
          color: item.id == current ? '#fff' : '#666666',
        }"
      >
        <span>{{ item.text }}</span>
        <i
          class="iconfonts"
          :style="{
            fontSize: '26px',
            color: item.id == current ? store.styleInfo.themeColor : '#666666',
          }"
        >
          &#xe684;
        </i>
      </div>
    </div>
    <div class="exhibits-right">
      <div class="exhibits-right-heard">
        <img class="banner-img" :src="$filters.getLinkUrl(imgs + '?imageView2/0/w/1180/format/webp')" alt="" />
        <span :style="{}">{{ remarks }}</span>
      </div>
      <div class="scroll-x-box" v-if="childItem.length > 0">
        <div
          v-for="item in childItem"
          @click="addChildId(item.id)"
          :style="{ borderColor: '#D2AD77' }"
          :key="item.id"
          class="scroll-x-box-item"
          :class="{ 'scroll-x-box-item-active': item.id == childNum }"
        >
          <span>{{ item.text }}</span>
          <span class="remarkStyle">{{ item.remarks }}</span>
        </div>
      </div>

      <div class="exhibits-content">
        <t-row :gutter="20" v-if="list.length > 0">
          <t-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3" v-for="item in list" :key="item.id">
            <div class="exhibits-item" @click="pathInfo(item.id)">
              <div style="background-color: #f0e9e1; width: 280px; height: 280px">
                <img
                  style="width: 100%; height: 100%"
                  class="t-image--fit-contain t-image--position-center"
                  :src="$filters.getLinkUrl(item.coverUrl + '?imageView2/1/w/280/h/280/format/webp')"
                  alt=""
                />
              </div>
              <div class="item-title">
                <span>{{ item.name }}</span>
              </div>
            </div>
          </t-col>
        </t-row>
        <!-- <div class="is-null-box" v-else>
          <span>暂无展品</span>
        </div> -->
        <!-- <t-row v-if="total > 12">
          <t-col
            :span="12"
            :class="{
              't-pagination0': store.styleInfo.themeColor == '#CFBDA8',
              't-pagination1': store.styleInfo.themeColor == '#8F9EBF',
              't-pagination2': store.styleInfo.themeColor == '#B9463F',
              't-pagination3': store.styleInfo.themeColor == '#343029',
              't-pagination4': store.styleInfo.themeColor == '#171719',
            }"
          >
            <t-pagination
              v-model="parmas.pageNo"
              v-model:pageSize="parmas.pageSize"
              :total="total"
              :showPageSize="false"
              show-jumper
              @change="onChange"
              @page-size-change="onPageSizeChange"
              @current-change="onCurrentChange"
            />
          </t-col>
        </t-row> -->
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'pageChild1',
});
</script>
<script setup lang="ts">
// @ts-nocheck
import { pathList, pathListLoop } from '../../route';
import { urls } from '@/utils/request/upload';
import { moduleShowpieces } from '@/api/exhibit/exhibit';
import { ref, watch, reactive, onActivated, onDeactivated } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { MessagePlugin } from 'tdesign-vue-next';
import { useProjectStore } from '@/store';
import { storeToRefs } from 'pinia';
const props = defineProps(['current']);

const imgs = ref('');
const remarks = ref('');
const store = useProjectStore();
const { childModel, tabvalue, styleInfo } = storeToRefs(store);
const router = useRouter();
const route = useRoute();
const childItem = ref([]);
const current = ref(1);
const childNum = ref(0);
const info = ref({
  children: [],
  id: 0,
  level: 0,
  number: 3,
  parentId: 0,
  remarks: '',
  sort: 0,
  text: '',
  type: 46,
  value: '',
});
const list = ref([]);
const total = ref(0);
const parmas = reactive({
  pageSize: 12000,
  pageNo: 1,
  id: 0,
  value: '',
});

const init = async () => {
  try {
    let res = await moduleShowpieces(localStorage.getItem('projectId'), parmas);
    // console.log(res.data);
    list.value = res.data.data;
    total.value = res.data.total;
  } catch {}
};
info.value = store.childModel;
console.log(info.value.children);

// current.value = store.childModel.children[0].children[0].id;
// remarks.value = store.childModel.children[0].children[0].remarks;
// imgs.value = store.childModel.children[0].children[0].value;
// if (store.childModel.children[0].children[0].children.length > 0) {
//   childItem.value = store.childModel.children[0].children[0].children;
//   childNum.value = store.childModel.children[0].children[0].children[0].id;
//   parmas.id = childNum.value;
//   // console.log('childItem', childItem.value);

//   init();
// } else {
//   parmas.id = store.childModel.children[0].children[0].id;
//   init();
// }
// const onPageSizeChange = (size) => {
//   init();
// };

const onCurrentChange = (index, pageInfo) => {
  init();
};
const pathInfo = (e: number) => {
  router.push({
    name: route.meta.loopType ? pathListLoop[2] : pathList[2],
    query: { id: e, moduleId: parmas.id, projectId: localStorage.getItem('projectId') },
  });
};
const onChange = (pageInfo) => {
  // console.log(pageInfo);
};
const addChildId = (e: number) => {
  childNum.value = e;
  parmas.id = e;
  init();
};
const addCruuent = (e: number, item: any) => {
  current.value = item.id;
  remarks.value = item.remarks;
  imgs.value = item.value;
  if (item.children.length !== 0) {
    childItem.value = item.children;
    // console.log('childItem', childItem.value);
    childNum.value = item.children[0].id;
    parmas.id = item.children[0].id;
    init();
  } else {
    // console.log(item.children);
    childItem.value = [];
    childNum.value = 0;
    parmas.id = item.id;
    init();
  }
};
watch(
  () => styleInfo,
  (value) => {
    if (route.query.childId) {
      const foundElement = styleInfo.value.moduleList.find((item) => item.id === Number(route.query.childId));
      // console.log(foundElement, 'foundElement--------');

      store.setchildModel(foundElement);
    } else {
      // const foundElement = styleInfo.value.moduleList.find((item) => item.id === childModel.value.id);
      // store.setchildModel(foundElement);
    }
  },
  { immediate: true, deep: true },
);
watch(
  () => childModel,
  (value) => {
    // console.log('store.childModel', value.value);

    info.value = store.childModel.children[props.current];
    if (store.childModel.children[props.current].children.length !== 0) {
      current.value = store.childModel.children[props.current].children[0].id;
      remarks.value = store.childModel.children[props.current].children[0].remarks;
      imgs.value = store.childModel.children[props.current].children[0].value;
      if (store.childModel.children[props.current].children[0].children.length > 0) {
        childItem.value = store.childModel.children[props.current].children[0].children;
        childNum.value = store.childModel.children[props.current].children[0].children[0].id;
        parmas.id = childNum.value;
        init();
        // console.log('childItem', childItem.value);
      } else {
        childItem.value = [];
        childNum.value = 0;
        init();
      }
    } else {
      // parmas.id = store.childModel.children[props.current].children[0].id;

      init();
    }
  },
  { immediate: true, deep: true },
);
watch(
  () => props.current,
  (value) => {
    // console.log(
    //   'store.childModel222',
    //   store.childModel.children[props.current],
    //   store.childModel.children[props.current].children.length,
    // );

    info.value = store.childModel.children[props.current];
    if (store.childModel.children[props.current].children.length !== 0) {
      current.value = store.childModel.children[props.current].children[0].id;
      remarks.value = store.childModel.children[props.current].children[0].remarks;
      imgs.value = store.childModel.children[props.current].children[0].value;
      if (store.childModel.children[props.current].children[0].children.length > 0) {
        childItem.value = store.childModel.children[props.current].children[0].children;
        childNum.value = store.childModel.children[props.current].children[0].children[0].id;
        parmas.id = childNum.value;
        init();
        // console.log('childItem', childItem.value);
      } else {
        childItem.value = [];
        childNum.value = 0;
        init();
      }
    } else {
      // parmas.id = store.childModel.children[props.current].children[0].id;

      init();
    }
  },
  { immediate: true, deep: true },
);
watch(
  () => tabvalue,
  (value) => {
    init();
  },
  { deep: true },
);
// onActivated(() => {
//   console.log('onActivated');
//   alert('onActivated');
// });
// onDeactivated(() => {
//   console.log('onDeactivated');
//   alert('onDeactivated');
// });
// console.log(info.value, 'return');
</script>

<style lang="less" scoped>
.remarkStyle {
  font-size: 16px;
  line-height: 32px;

  color: #666666;
}
.title-box {
  font-size: 17px;
  // font-family: SourceHanSerif;
  font-weight: 500;
  color: #333333;
  line-height: 32px;
  margin-top: 50px;
}
.exhibits-box {
  display: flex;
  width: 100% !important;
  // background: #f0e9e1;
}
.exhibits-left {
  padding: 8px 21px;
  width: 256px;
  height: 600px;
  // overflow-y: scroll;
}
.item-box {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 30px;
  height: 64px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
  > span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: absolute;
    top: 20px;
  }
}
.exhibits-right-heard {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 50px;
  img {
    width: 100%;
    height: auto;
  }
  span {
    width: 780px;
    font-weight: 500;
    color: #333333;
    line-height: 32px;
    margin-top: 32px;
    text-align: justify;
  }
}
.exhibits-right {
  display: flex;
  flex-direction: column;
  overflow: hidden;

  flex: 1;
}
.t-row {
  margin: 0;
}
.exhibits-item {
  display: flex;
  flex-direction: column;
  width: 246px;
  img {
    height: 210px;
  }
}
.item-title {
  width: 100%;
  padding: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  span {
    font-size: 18px;
    // font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;
    font-weight: 400;
    color: #333333;
    line-height: 28px;
    cursor: pointer;
  }
}
.exhibits-content {
  width: 1180px;
  // margin-top: 50px;
  padding-bottom: 80px;
}
.scroll-x-box {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  height: 40px;
  overflow: hidden;
  overflow-x: auto;
  box-shadow: inset 0px -1px 0px 0px rgba(230, 230, 230, 0.5);
}
.scroll-x-box-item {
  display: flex;
  justify-content: center;
  cursor: pointer;
  border: none;
  text-align: center;
  padding: 8px 0;
  // width: 100px;
  margin: 0 40px;
  span {
    display: flex;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
  }
}
.scroll-x-box-item-active {
  border-bottom: 1px solid transparent;
}
.is-null-box {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 50px 0;
  span {
    font-size: 24px;
    // font-family: SourceHanSerif;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.9);
    line-height: 22px;
  }
}
.t-pagination0 {
  :deep(.t-is-current) {
    background: #cfbda8 !important;
    border-color: #cfbda8 !important;
  }
  :deep(.t-pagination__number:active) {
    background: #cfbda8 !important;
    border-color: #cfbda8 !important;
  }
}
.t-pagination1 {
  :deep(.t-is-current) {
    background: #8f9ebf !important;
    border-color: #8f9ebf !important;
  }
  :deep(.t-pagination__number:active) {
    background: #8f9ebf !important;
    border-color: #8f9ebf !important;
  }
}
.t-pagination2 {
  :deep(.t-is-current) {
    background: #b9463f !important;
    border-color: #b9463f !important;
  }
  :deep(.t-pagination__number:active) {
    background: #b9463f !important;
    border-color: #b9463f !important;
  }
}
.t-pagination3 {
  :deep(.t-is-current) {
    background: #343029 !important;
    border-color: #343029 !important;
  }
  :deep(.t-pagination__number:active) {
    background: #343029 !important;
    border-color: #343029 !important;
  }
}
.t-pagination4 {
  :deep(.t-is-current) {
    background: #171719 !important;
    border-color: #171719 !important;
  }
  :deep(.t-pagination__number:active) {
    background: #171719 !important;
    border-color: #171719 !important;
  }
}
/deep/.t-pagination__number:hover {
  border-color: var(--td-component-border);
}
/deep/.t-input:hover {
  border-color: var(--td-component-border);
}
/deep/.t-input--focused {
  box-shadow: 0 0 0 0;
}
/deep/.t-pagination__number:active {
  background: #171719 !important;
}
</style>
